<template>
  <!-- <el-container>
    <el-input
      :class="'ir' + this.data.radius"
      :style="inputStyle"
      readonly
      :placeholder="data.placeholder"
      v-model="searchTxt">
      <i slot="prefix" class="el-input__icon el-icon-search" :style="iconColor"></i>
    </el-input>
  </el-container> -->
  <div class="ma" :style="maStyle">
    <div class="inputA" :style="posStyle">
      <i class="icon el-icon-search" :style="iconStyle"></i>
      <input type="text" :style="inputStyle" v-model="searchTxt" placeholder="" @focus="focusIn" @blur="blurOut"/>
    </div>
  </div>

</template>

<script>
  export default {
    data(){
      return {
        searchTxt: ''
      }
    },
    props: {
      data: {
        type: Object,
        default: {}
      }
    },
    created(){
      this.searchTxt = this.data.placeholder;
    },
    watch:{
      'data.placeholder':function(){
        this.searchTxt = this.data.placeholder;
      }
    },
    computed: {
      posStyle() {
        return 'margin:' + this.data.margin.top / 2 + 'px 0 ' +this.data.margin.bottom / 2 + 'px;padding:0 ' + this.data.padding.lr  / 2 + 'px 0;';
      },
      iconStyle(){
        return 'color:' + this.data.color.icon + ';left:' + (20 + this.data.padding.lr)  / 2 + 'px';
      },
      inputStyle(){
        return 'border-radius:' + this.data.radius / 2 + 'px;border:1px solid ' + this.data.color.border + ';background-color:' + this.data.color.bg + ';color:' + this.data.color.text + ';';
      },
      maStyle(){
        var bg = '';
        if (this.data.bg_type == 1) {
          bg = 'background:' + this.data.bg_color;
        } else if (this.data.bg_type == 2) {
          bg = 'background-image:url(' + this.data.bg_img + ')';
        }
        return bg
      },
    },
    methods:{
      //输入框获取焦点
      focusIn(){
        if(this.searchTxt == this.data.placeholder){
          this.searchTxt = '';
        }
      },
      //输入框失去焦点
      blurOut(){
        if(this.searchTxt == ''){
          this.searchTxt = this.data.placeholder;
        }
      }
    }

  }
</script>

<style lang="scss">
.ma{
  width: 100%;
  overflow: hidden;
  background-size: contain;
}

.inputA{
  width: 100%;
  position: relative;
  overflow: hidden;

  i{
    position: absolute;
    z-index: 2;
    top: 10px;
    //left: 6px;
    width: 24px;
    height: 24px;
  }

  input{
    font-size: 14px;
    width: 100%;
    //border:1px solid #666;
    //border-radius: 3px;
    //color:#909399;
    height: 36px;
    line-height: 36px;
    box-sizing: border-box;
    padding-left: 36px;

    // box-shadow:0 0 0 60px #eee inset;
    //background: #fff;

    &:focus{
      outline:none
    }
  }
}
</style>
